<!DOCTYPE HTML>
<html>
<head>
<title><?php echo $this->getTitle(); ?></title>
<?php echo $this->getJavascript(); ?>
<?php echo $this->getCss(); ?>
</head>
<body>
<div id="wrapper">
	<?php TemplateHelper::template('header'); ?>
	<?php TemplateHelper::template('error'); ?>
	<?php TemplateHelper::template('alert'); ?>
	
	<div>
		<a class="page-name-link" href="<?php echo TemplateHelper::getUrl('employee', 'home')?>">HOME</a>  <span class="page-name-active">&gt; Product</span>
	</div>
	
	<div>
		<div class="employee-left-col">
			<fieldset id="fieldset-transaction">
			  	<legend>PRODUCT LIST</legend>
				<div id="accordion">
					<?php foreach ($this->display['categories'] as $category): ?>					
							<h3><?php echo $category->getCategoryName(); ?></h3>
							<div class="product-categories-products">
								<?php foreach($category->getProducts() as $product): ?>		
									<?php 
										$id = $category->getCategoryName() . '_' . $product->getProductName();
										
										$id = str_replace(' ', '_', $id);
										
										$id = str_replace('/', '_', $id);
									?>								
									<div class="product-box">
										<div class="product-image">
											<a href="<?php echo '#'.$id; ?>" class="product-box-get-info">
												<input type="hidden" id="product_id" value="<?php echo $product->getProductId(); ?>" />
												<img onmouseover="showName('<?php echo $product->getProductId(); ?>')" src="<?php echo $product->getImgDirectory(); ?>" title="<?php echo $product->getProductName(); ?>"/>
											</a>	
										</div>
										
										<a href="<?php echo '#'.$id; ?>" class="product-box-get-info">
											<input type="hidden" id="product_id" value="<?php echo $product->getProductId(); ?>" />
											<div id="prodName_<?php echo $product->getProductId(); ?>" class="product-image-name" style="display: none;">
												<?php echo $product->getProductName(); ?>
											</div>
										</a>
									</div>											
								<?php endforeach; ?>		
								<div class="clear-both"></div>
							</div>
					<?php endforeach; ?>
				</div>
			</fieldset>
		</div>
		<div id="orderSumarryBox" class="employee-right-col">
			<div class="CC">
				<fieldset id="fieldset-transaction">
				  	<legend>PRODUCT INFO</legend>
				  	<form id="form_product_info" action="<?php echo TemplateHelper::getUrl('product', 'updateProductInfo')?>" method="post">
					  	<input type="hidden" id="hidden_product_id" name="product_id" />
					  	<div id="product_image_holder">
					  		<div class="col1"><img id="product_image" alt="product image" src="resources/images/icons/no-image.jpg" /></div>
					  		<div class="col2">
					  			<div class="row">
						  			<div class="product-label-02">Product id:</div>
						  			<div class="product-input-02" id="text_product_id">XXXXXXXXXXX</div>
						  			<div class="clear-both"></div>
					  			</div>
					  			<div class="row">
						  			<div class="product-label-02">Product image:</div>
						  			<div class="product-input-02"><span id="file_product_image">XXXXXXXXXXX</span></div> 
						  			<div class="clear-both"></div>
					  			</div>
					  			<div class="row">
									<select id="availImg" style="visibility: hidden;">
									</select>
								</div>
					  		</div>
					  		<div class="clear-both"></div>
					  	</div>
					  	<div id="product_form">				  		
					  		<div class="product-row">
					  			<div class="product-label">Product name:</div>
					  			<div class="product-input"><input type="text" id="text_product_name" name="product_name" class="product-text" /></div>
					  			<div class="clear-both"></div>
					  		</div>
					  		<div class="product-row">
					  			<div class="product-label">Category:</div>
					  			<div class="product-input">
					  			<select id="select_product_category" name="product_category" class="product-text">
						  			<?php foreach ($this->display['categories'] as $category): ?>
					  					<option value="<?php echo $category->getCategoryId(); ?>"><?php echo $category->getCategoryName(); ?></option>
					  				<?php endforeach; ?>
					  			</select>
					  			</div>
					  			<div class="clear-both"></div>
					  		</div>
					  		<div class="product-row">
					  			<div class="product-label">Price:</div>
					  			<div class="product-input"><input type="text" id="text_product_price" name="product_price" class="product-text" /></div>
					  			<div class="clear-both"></div>
					  		</div>
					  		<div class="product-row">
					  			<div class="product-label">Description:</div>
					  			<div class="product-input"><textarea id="text_product_description" name="product_description" col="20" row="10"></textarea></div>
					  			<div class="clear-both"></div>
					  		</div>
					  		<div class="product-row">
					  			<div class="product-label">Archive:</div>
					  			<div class="product-input">
					  				<select id="select_product_archive" name="product_archive" class="product-text-02">
					  					<option value="y">Yes</option>
					  					<option value="n">No</option>
					  				</select>
					  			</div>
					  			<div class="clear-both"></div>
					  		</div>
					  		<div class="product-row product-button">
					  			<input type="button" style="float:left;" value="Add Product" class="button-jquery-ui" id="product_btn_add" />
					  			<input type="button" value="Unarchive" class="button-jquery-ui" id="unarchive_btn" style="visibility:hidden;" onclick="unarchive()"/>			  			
					  			<input type="button" value="Update" class="button-jquery-ui" id="product_btn_save" style="visibility:hidden;" onclick="updateProduct()"/>	
					  		</div>
					  	</div>
				  	</form>
				</fieldset>
			</div>
		</div>
		<div class="clear-both"></div>
	</div>
</div>
<div id="footer"><?php echo BaliwagConstant::PAGE_FOOTER_NOTE; ?></div>
<?php TemplateHelper::template('loading'); ?>
<?php TemplateHelper::template('confirmation'); ?>
<!--  -->
<div id="product_box_dialog" class="product-box-dialog" title="Add Product">
	<div id="product_image_holder">
		<div class="col1"><img id="product_image_add" alt="product image" src="resources/images/icons/no-image.jpg" /></div>
  		<div class="col2 col2Override">
  			<div class="row">
				<div class="product-label-02">Product image:</div>
				<div class="product-input-02"><span id="file_product_image_add">resources/images/icons/no-image.jpg</span></div> 
				<div class="clear-both"></div>
			</div>
			
			<div class="row">
				<select id="availImg_add">
				</select>
			</div>
  		</div>
  		<div class="clear-both"></div>
  	</div>
  	<div id="product_form">				  		
  		<div class="product-row">
  			<div class="product-label">Product name:</div>
  			<div class="product-input"><input type="text" id="text_product_name_add" name="product_name" class="product-text" /></div>
  			<div class="clear-both"></div>
  		</div>
  		<div class="product-row">
  			<div class="product-label">Category:</div>
  			<div class="product-input">
  			<select id="select_product_category_add" name="product_category" class="product-text">
  				<?php foreach ($this->display['categories'] as $category): ?>
					  <option value="<?php echo $category->getCategoryId(); ?>"><?php echo $category->getCategoryName(); ?></option>
				<?php endforeach; ?>
  			</select>
  			</div>
  			<div class="clear-both"></div>
  		</div>
  		<div class="product-row">
  			<div class="product-label">Price:</div>
  			<div class="product-input"><input type="text" id="text_product_price_add" name="product_price" class="product-text" /></div>
  			<div class="clear-both"></div>
  		</div>
  		<div class="product-row">
  			<div class="product-label">Count:</div>
  			<div class="product-input"><input type="text" id="text_product_count_add" name="product_count" class="product-text" /></div>
  			<div class="clear-both"></div>
  		</div>
  		<div class="product-row">
  			<div class="product-label">Description:</div>
  			<div class="product-input"><textarea id="text_product_description_add" name="product_description" col="20" row="10"></textarea></div>
  			<div class="clear-both"></div>
  		</div>
  		<div class="product-row product-button">
  			<input type="submit" value="Save" class="button-jquery-ui" id="product_btn_save" onclick="addProduct()"/>  				  			
  		</div>
  	</div>
</div>
</body>
</html>